<template>
	<z-paging ref="paging" v-model="list" refresher-only="" @query="getData">
		<view class="list-box">
			<view class="item" v-for="(item,index) in list">
				<view class="top">
					<view class="l" @click="onSelect(index)">
						<view class="title">
							<view class="name">{{item.real_name}}</view>
							<view class="tel">{{item.phone}}</view>
							<view class="status" v-if="item.is_default">默认</view>
						</view>
						<view class="address">
							{{item.province}} {{item.city}} {{item.district}} {{item.detail}}
						</view>
					</view>
					<navigator hover-class="on" :url="`./edit?id=${item.id}`" class="r">
						<up-icon name="edit-pen" color="#aaa" size="38rpx"></up-icon>
					</navigator>
				</view>
				<view class="bottom">
					<view class="l" @click="onAddressDefaultSet(index)">
						<!-- <image :src="`/subpages/static/img/icon-select${item.is_default?'ed':''}.png`" mode=""></image> -->
						<view class="icon" :class="{on:item.is_default}">
							<up-icon name="checkmark" color="#fff" size="28rpx"></up-icon>
						</view>
						默认收货地址
					</view>
					<view class="r">
						<view class="it" @click="onCopy(index)">
							<up-icon name="order" color="#aaa" size="38rpx"></up-icon> 复制
						</view>
						<view class="it"  @click="onDel(index)">
							<up-icon name="trash" color="#aaa" size="38rpx"></up-icon>	 删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<template #bottom>
			<view class="bottom-box">
				<navigator hover-class="no" url="./add" class="btn">
					添加收货地址
				</navigator>
			</view>
		</template>
		</z-paging>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import {getAddressList,addressDel,addressDefaultSet} from "@/api/products.js"
	const type=ref('')
	const list=ref([])
	const paging=ref(null)
	onShow(()=>{
		if(paging.value){
			paging.value.reload()
		}
	})
	onLoad(obj=>{
		if(obj.type=='select'){
			type.value='select'
		}
		getData();
	})
	
	const getData=async ()=>{
		const res=await getAddressList()
		paging.value.complete(res.data);
	}
	const onSelect=(index)=>{
		if(type.value=='select'){
			uni.setStorageSync('address',list.value[index])
			uni.navigateBack()
		}
	}
	const  onAddressDefaultSet=async (index)=>{
		await addressDefaultSet({id:list.value[index].id})
		paging.value.reload()
	}
	const onCopy=(index)=>{
		const {real_name,phone,province,city,district,detail} = list.value[index]
		uni.setClipboardData({
			data:`${real_name}
${phone}
${province+city+district+detail}`
		})
	}
	const onDel = async (index)=>{
		await addressDel({id:list.value[index].id})
		uni.$u.toast('删除成功！')
		paging.value.reload()
	}

</script>

<style lang="scss">
	page{
		background-color: #F5F6FA;
	}
	.list-box{
		padding:20rpx 24rpx;
		.item{
			background-color: #fff;
			border-radius: 16rpx;
			padding:0 28rpx;
			margin-bottom: 20rpx;
			.top{
				display: flex;align-items: center;
				border-bottom: 1rpx solid #fafafa;
				padding-bottom: 30rpx;
				.l{
					flex:1;margin-right:32rpx;
					.title{
						padding-top:40rpx;
						display: flex;font-size:32rpx;align-items: center;line-height: 1;
						.name{
							font-weight: bold;
						}
						.tel{
							color:#141311;margin-left:16rpx;
						}
						.status{
							font-size:16rpx;background-color: #FF6259;
							border-radius: 4rpx;
							margin-left:16rpx;
							line-height: 16rpx;
							padding:6rpx 8rpx;color:#FFFFFF;
						}
					}
					.address{
						color:#666666;font-size:26rpx;margin-top:16rpx;
					}
				}
				.r{
					
				}
			}
			.bottom{
				padding:24rpx 0;
				display: flex;
				justify-content: space-between;font-size:26rpx;color:#999999;
				align-items: center;
				image{
					width:36rpx;height:36rpx;
				}
				.l{
					display: flex;align-items: center;
					.icon{
						width:36rpx;height:36rpx;
						display: flex;align-items: center;
						justify-content: center;
						border-radius: 80rpx;
						box-sizing: border-box;
						border:3rpx solid #999;
						margin-right:12rpx;
						&.on{
							background-color: #FD2A00;
							border-color: #FD2A00;
						}
					}
				}
				.r{
					display: flex;align-items: center;
					.it{
						display: flex;align-items: center;margin-left:56rpx;
					}
				}
			}
		}
	}
	
	.bottom-box{
		background-color: #fff;
		padding:10rpx 28rpx;
		display: flex;box-sizing: border-box;
		position: fixed;bottom:0;left:0;
		width:100%;z-index: 99;align-items: center;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		.btn{
			width:100%;
			border-radius: 12rpx;
			line-height: 80rpx;
			background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
			text-align: center;
			font-size:28rpx;color:#FFFFFF;font-weight: bold;
		}
	}
</style>
